<template>
<van-tabbar v-model="active" active-color="#fc6627" route>
  <van-tabbar-item icon="home-o" to="/">
    <span>首页</span>
    <template #icon="{active}">
     <GeekIcon v-if="active" name="icon-home-sel"></GeekIcon>
     <GeekIcon v-else name="icon-home"></GeekIcon>
    </template>
  </van-tabbar-item>
    <van-tabbar-item icon="search" to="/question">
    <span>问答</span>
    <template #icon="{active}">
     <GeekIcon v-if="active" name="icon-qa-sel"></GeekIcon>
     <GeekIcon v-else name="icon-qa"></GeekIcon>
    </template>
    </van-tabbar-item>
  <van-tabbar-item icon="friends-o" to="/video">
   <span>视频</span>
    <template #icon="{active}">
     <GeekIcon v-if="active" name="icon-video-sel"></GeekIcon>
     <GeekIcon v-else name="icon-video"></GeekIcon>
    </template>
    </van-tabbar-item>
  <van-tabbar-item icon="setting-o" to="/user">
  <span>我的</span>
    <template #icon="{active}">
     <GeekIcon v-if="active" name="icon-mine-sel"></GeekIcon>
     <GeekIcon v-else name="icon-mine"></GeekIcon>
    </template>
  </van-tabbar-item>

</van-tabbar>
</template>

<script>
// import GeekIcon from '@/components/geek-icon.vue'
export default {
  name: 'AppTabbar',
  components: {
    // GeekIcon,
  },
  data () {
    return {
      active: 'home'
    }
  }
}
</script>

<style>

</style>
